<template>
<div>
  <ul class="list">
    <li>
      <router-link to="/index">
        <a-icon type="diff" />
        <p>首页</p>
      </router-link>


    </li>
    <li>
      <router-link to="/music">
        <van-icon name="music-o" />
        <p>音乐</p>
      </router-link>

    </li>
    <li>
      <router-link to="/mine">
        <van-icon name="user-circle-o" />
        <p>我的</p>
      </router-link>

    </li>
  </ul>
</div>
</template>

<script>
// import music from "@/views/music";
export default {
name: "foot",
  // components:{
  //   music
  // }
}
</script>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
.list{
  list-style: none;
  width: 100%;
  height: 60px;
  //padding-top: 10px;
  line-height: 20px;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background-image: url("../assets/img/timg.gif");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.6;
  //background: rgba(155,155,0.0.5);
  li{
    padding-top: 10px;
    width: calc(100% / 3);
    height: 100%;
    font-size: 24px;
    text-align: center;
    color: #2c3e50;
    p{
      font-size: 16px;
      //width: 20px;
      height: 20px;
      color: #bbb;
    }
  }
  /deep/li:hover{
    background: cyan;
  }
}
</style>